<template>
	<view class="fixed-background">
		<div class="content">
			<!-- <up-navbar title="邻里帮租" @rightClick="rightClick" :autoBack="true" left-icon-size="0px" bg-color="#FEB98E"
				title-style="color:#ffffff;font-size: 20px;font-weight: bold;letter-spacing: 10px;" placeholder='true'>
			</up-navbar> -->
			<view class="grope">
				<view style="">
					<view
						style="background-color: #ffffff;width: calc(90vw - 30px);margin: 0 auto;padding: 0px 15px;border-radius: 20px;">
						<view style="display: flex;justify-content: center;align-items: center;">
							<view @click="location" style="display: flex;align-items: center;">
								<view style="font-size: 16px;">
									贵阳
								</view>
								<view style="margin-left: 4px;">
									<u-icon name="arrow-down-fill" color="#000000" size="12px"></u-icon>
								</view>
							</view>
							<view style="width: 1px;height: 16px;background-color: #D8D8D8;margin: 0 10px;">

							</view>
							<u-search placeholder="请输入小区/商圈/地铁" v-model="keyword" input-align="center"
								:show-action="false" :clearabled="true" :disabled="true" @click="search"
								bgColor='#ffffff'></u-search>
						</view>
					</view>
				</view>
			</view>
			<view class="carousel">
				<u-swiper :list="swipers" keyName="image" circular height="100px" bg-color="" indicator='true'
					img-mode="widthFix" indicator-active-color="#FF8E5A">
				</u-swiper>
			</view>
			<view class="fasten">
				<view class="rowClass">
					<u-row>
						<u-col span="3" text-align="center" v-for="(item,index) in navListone" :key="index">
							<view class="u-padding-10 tabName" @tap="clickNavone(item.name,item.url)"
								hover-class="hoverClass">
								<view style="display: flex;justify-content: center;">
									<image :src="item.src" style="width: 72.5px;height: 50px;" mode="widthFix">
									</image>
								</view>
								<view class="" style="width: 100%;color: #333333;margin-top: 6px;font-size: 14px;">
									{{item.name}}
								</view>
							</view>
						</u-col>
					</u-row>
					<u-row>
						<u-col span="3" text-align="center" v-for="(item,index) in navListtwo" :key="index">
							<view class="u-padding-20 tabName" @tap="clickNavone(item.name,item.url)"
								hover-class="hoverClass">
								<view style="display: flex;justify-content: center;">
									<image :src="item.src" style="width: 30px;" mode="widthFix">
									</image>
								</view>
								<view class="" style="width: 100%;color: #333333;margin-top: 6px;font-size: 12px;">
									{{item.name}}
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view style="display: flex;justify-content: space-around;padding: 0 10px;">
				<view
					style="display: flex;background: linear-gradient(to bottom, #FFF3ED, #FFE8D9);padding: 10px;border-radius: 5px;">
					<view style="margin-right: 5px;">
						<view style="color: #99392F;font-size: 16px;">
							租住保险
						</view>
						<view style="font-size: 13px;color: #7F7269;margin-top: 2px;">
							这里是文字描述
						</view>
					</view>
					<view class="">
						<image src="../../static/index/fasten9.png" mode="widthFix" style="width:45px;"></image>
					</view>
				</view>
				<view
					style="display: flex;background: linear-gradient(to bottom, #FFFBDA, #FFF1CD);padding: 10px;border-radius: 5px;">
					<view style="margin-right: 5px;">
						<view style="color: #987E38;font-size: 16px;">
							公正签约
						</view>
						<view style="font-size: 13px;color: #998E7A;margin-top: 2px;">
							这里是文字描述
						</view>
					</view>
					<view class="">
						<image src="../../static/index/fasten10.png" mode="widthFix" style="width:45px;"></image>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;margin: 6px 0;" @click="clickNavone('有房出租/转租')">
				<image src="@/static/index/fasten11.png" mode="widthFix" style="width: 94vw;"></image>
			</view>
			<view class="">
				<operAtions @fn2='housetype' @fn3='rent' @fn4='tenancy'></operAtions>
			</view>
			<u-popup :show="judgmentshow" :round="20" mode="bottom" @close="judgmentshow=false" @open="open"
				closeable='true' :z-index="999999" :close-on-click-overlay="false" :safe-area-inset-bottom="false">
				<dengLu @cancellationone='judgmentshow=false' @restartone='restart' />
			</u-popup>
			<view class="distribution">
				<uwaterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="demo-warter" v-for="(item, index) in leftList" :key="index"
							@click="clickImage(item.id)">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<view style="position: absolute;z-index: 10;">
								<view class="label">
									自助看房
								</view>
							</view>
							<u-lazy-load threshold="300" border-radius="12" :image="item.image" :index="index"
								img-mode="aspectFill" height="160px"></u-lazy-load>
							<view class="item-title">{{item.villageName}}
							</view>
							<view class="item-title"
								style="fmargin: 2px 0;font-size: 12px;color: #666666;font-weight: 400;">
								{{item.type == '整租' ? item.houseNum + item.houseHall + item.toiletNum : item.roomType+'-朝'+item.direction}}
								· {{item.type == '整租' ? item.houseArea : item.roomArea}}㎡
							</view>
							<view style="display: flex;padding: 0 4px;">
								<view v-for="(itemthree,indexthree) in item.featureList.slice(0,3)" :key="indexthree"
									class="ticket">
									{{itemthree.feature}}
								</view>
							</view>
							<view class="item-price">
								￥{{item.price}}元</view>
							<!-- <view class="item-desc">{{item.type}} |
								{{item.floor}}
							</view> -->
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="demo-warter" v-for="(item, index) in rightList" :key="index"
							@click="clickImage(item.id)">
							<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
							<view style="position: absolute;z-index: 10;">
								<view class="label">
									自助看房
								</view>
							</view>
							<u-lazy-load threshold="300" border-radius="12" :image="item.image" :index="index"
								img-mode="aspectFill" height="160px"></u-lazy-load>
							<view class="item-title">{{item.villageName}}
							</view>
							<view class="item-title"
								style="fmargin: 2px 0;font-size: 12px;color: #666666;font-weight: 400;">
								{{item.type == '整租' ? item.houseNum + item.houseHall + item.toiletNum : item.roomType+'-朝'+item.direction}}
								· {{item.type == '整租' ? item.houseArea : item.roomArea}}㎡
							</view>
							<view style="display: flex;padding: 0 4px;">
								<view v-for="(itemthree,indexthree) in item.featureList.slice(0,3)" :key="indexthree"
									class="ticket">
									{{itemthree.feature}}
								</view>
							</view>
							<view class="item-price">
								￥{{item.price}}元</view>
							<!-- <view class="item-desc">{{item.type}} |
								{{item.floor}}
							</view> -->
						</view>
					</template>
				</uwaterfall>
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="addRandomData"></u-loadmore>
			</view>
		</div>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref,
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import {
		post,
		get
	} from '@/serve/method.js'
	import {
		test,
	} from '@/node_modules/uview-plus';
	import {
		uwaterfall
	} from '@/node_modules/uview-plus/components/u-waterfall/u-waterfall'
	import {
		operAtions
	} from '@/pages/components/index/operations.vue'
	import {
		dengLu
	} from '../../pages/components/zy/denglu.vue'
	// 筛选
	// 租期
	const tenancy = (m) => {
		console.log(m, 444)
	}
	// 户型
	const housetype = (m) => {
		console.log(m, 222)
	}
	// 租金
	const rent = (m) => {
		console.log(m, 333)
	}
	// 登录
	// 登陆判断
	const judgment = ref('')
	const judgmentshow = ref(false)
	const clickNavone = (name, url) => {
		console.log(name, 888)
		if (judgment.value == 'false') {
			return loginJudgment()
		}
		if (name == '有房出租/转租') {
			uni.getStorage({
				key: 'lifeData',
				success: function(res) {
					uni.navigateTo({
						url: '/pages/detail/addHouse'
					});
				}
			})
		} else {
			console.log(url)
			if (url !== '') {
				uni.navigateTo({
					url: url
				});
			} else {
				uni.showToast({
					title: '敬请期待',
					duration: 2000,
					icon: 'none',
				});
			}
		}
	}
	onShow(() => {
		uni.getStorage({
			key: 'lifeData',
			success: function(res) {
				judgment.value = 'true'
				// 获取未读
				let urlsfoure = '/api/user/selectViewHouseRecordCount'
				get(urlsfoure, {
					userId: res.data.vuex_user.userId
				}).then((resfoure) => {
					if (resfoure.data.total !== 0) {
						uni.setTabBarBadge({
							index: 1,
							text: String(resfoure.data.total)
						})
					}
				})
				// 以上是获取未读
				let urlsone = "/api/user/toSignFDContract"
				post(urlsone, {
					userId: res.data.vuex_user.userId
				}).then((resone) => {
					console.log(resone, 8888888)
					if (resone.data !== undefined) {
						if (resone.msg == '未认证') {
							uni.showModal({
								title: '提示',
								content: '您有未签署的合同，点击确定按钮认证个人信息再去签署合同吧',
								// showCancel: false,
								success: function(res) {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/mine/authentication'
										});
									}
								}
							});
						} else {
							uni.showModal({
								title: '提示',
								content: '您有未签署的合同，点击确定去签约吧',
								success: function(resoo) {
									if (resoo.confirm) {
										console.log('用户点击确定');
										let urlstwo = "/api/user/signFDContract"
										post(urlstwo, {
											userId: res.data.vuex_user
												.userId,
											signFlowId: resone.data
												.signFlowId,
											payRent: resone.data.payRent,
											houseId: resone.data.houseId,
										}).then((itemss) => {
											console.log(itemss.data, 88888)
											let fileList = JSON.stringify(
												itemss
												.data)
											uni.navigateTo({
												url: '/pages/houseViewing/interlinking?id=' +
													encodeURIComponent(
														fileList),
											});
										})
									} else if (resoo.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					} else {
						get(`/api/user/getNoSignContract/${res.data.vuex_user.userId}`).then((
							resyy) => {
							console.log(resyy, 888888888)
							if (resyy.data.contractVo.projectCode !== undefined) {
								console.log(resyy.data.sysUser.authStatus, 9999999)
								if (resyy.data.sysUser.authStatus != 2 && resyy.data
									.sysUser.authStatus != 1) {
									uni.showModal({
										title: '提示',
										content: '您有未签署的合同，点击确定按钮认证个人信息再去签署合同吧',
										// showCancel: false,
										success: function(res) {
											if (res.confirm) {
												uni.navigateTo({
													url: '/pages/mine/authentication'
												});
											}
										}
									});
								} else {
									uni.showModal({
										title: '提示',
										content: '您有未签署的合同，点击确定去签约吧',
										success: function(resoo) {
											if (resoo.confirm) {
												console.log('用户点击确定');
												let fileList = JSON
													.stringify(
														resyy)
												uni.navigateTo({
													url: '/pages/detail/yanzhen?id=' +
														encodeURIComponent(
															fileList
														),
												});
											} else if (resoo.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								}
							}
						}).catch((res) => {
							console.log('失败')
						})
					}
				})
			},
			fail: function(res) {
				console.log('未登录')
				judgment.value = 'false'
			}
		})
	})
	const restart = () => {
		uni.reLaunch({
			url: '/pages/homepage/index'
		});
	}
	const clickImage = (houseId) => {
		if (judgment.value == 'false') {
			return loginJudgment()
		} else {
			uni.navigateTo({
				url: `/pages/detail/detail?houseId=${houseId}`
			});
		}
	}
	const loginJudgment = () => {
		judgmentshow.value = true
	}
	// 以下房源
	const flowList = ref([])
	const pageNum = ref(1)
	const pageSize = ref(20)
	const uWaterfall = ref('')
	const loadStatus = ref('loadmore')
	const houseList = ref([])
	// 小区
	const villageId = ref(null)
	// 房型
	const houseNum = ref(null) //室
	const houseHall = ref(null) //厅
	// 租金
	const maxPrice = ref(null)
	const minPrice = ref(null)
	// 租期
	const rentDate = ref(null)
	onLoad(() => {
		flowList.value.length = 0
		pageNum.value = 1
		console.log(flowList.value)
	})
	onReachBottom(() => {
		console.log('触底');
		findHouseList()
	})
	// 下拉刷新
	onPullDownRefresh(() => {
		flowList.value.length = 0
		pageNum.value = 1
		findHouseList(1);
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 500);
	})
	// onReachBottom = () => {
	// 	console.log('触底');
	// 	findHouseList()
	// }
	onMounted(() => {
		findHouseList(1)
	})
	const findHouseList = (type) => {
		if (type == 1) {
			pageNum.value = 1
			flowList.value.length = 0
			uWaterfall.value.clear();
		}
		let url = "/api/house/findHouseList"
		console.log(url);
		post(url, {
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			orderByColumn: 'update_time,create_time',
			isAsc: 'desc',
			state: 0,
			villageId: villageId.value,
			houseNum: houseNum.value,
			houseHall: houseHall.value,
			maxPrice: maxPrice.value,
			minPrice: minPrice.value,
			rentDate: rentDate.value,
		}).then(data => {
			if (pageNum.value > 1 && data.length < pageSize.value) {
				return loadStatus.value = 'nomore';
			}
			houseList.value = data.rows;
			for (let i = 0; i < houseList.value.length; i++) {
				// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
				let item = houseList.value[i]
				item.image = item.faceUrl
				if (item.type == 0) {
					item.type = '整租'
				} else if (item.type == 1) {
					item.type = '合租'
				}
				if (item.roomType == 1) {
					item.roomType = '主卧'
				} else if (item.roomType == 2) {
					item.roomType = '次卧'
				} else {
					item.roomType = '未知'
				}

				if (test.isEmpty(item.houseNum)) {
					item.houseNum = ''
				}
				if (test.isEmpty(item.houseHall)) {
					item.houseHall = ''
				}
				if (test.isEmpty(item.toiletNum)) {
					item.toiletNum = ''
				}
				if (test.isEmpty(item.floor)) {
					item.floor = ''
				} else {
					item.floor = item.floor + '层'
				}
				flowList.value.push(item);
			}
			++pageNum.value
			loadStatus.value = 'loadmore';
		});
	}
	// 以上为
	// 下拉菜单
	// 小区
	const communityvalue = ref([])
	// 房型
	const housetypeValue = ref(['二室一厅', '三室一厅', '一室一厅', '一室二厅', '一室三厅', '二室二厅', '二室三厅', '三室二厅', '三室三厅', '四室一厅', '四室二厅',
		'四室三厅'
	])
	// 租金
	const rental = ref([{
		'value': "不限",
		'title': 1
	}, {
		'value': "≤1000元",
		'title': 2
	}, {
		'value': "1000-1500元",
		'title': 3
	}, {
		'value': "1500-2000元",
		'title': 3
	}, {
		'value': "2000-3000元",
		'title': 3
	}, {
		'value': "3000-5000元",
		'title': 3
	}, {
		'value': "5000以上",
		'title': 4
	}])
	// 租期
	const leaseTerm = ref([{
		'value': "不限",
		'title': null
	}, {
		'value': "一个月",
		'title': 1
	}, {
		'value': "三个月",
		'title': 3
	}, {
		'value': "六个月",
		'title': 6
	}, {
		'value': "一年",
		'title': 12
	}, {
		'value': "二年",
		'title': 24
	}])
	// 以上为下拉菜单
	const navListone = ref([{
			name: "附近房源",
			src: "/static/index/fasten1.png",
			type: "1",
			url: '/pages/search/fourheads?id=附近好房'
		},
		{
			name: "我要整租",
			src: "/static/index/fasten2.png",
			type: "1",
			url: '/pages/search/searchList?id=0'
		},
		{
			name: "我要合租",
			src: "/static/index/fasten3.png",
			type: "1",
			url: '/pages/search/searchList?id=1'
		},
		{
			name: "我要短租",
			src: "/static/index/fasten4.png",
			type: "1",
			url: '/pages/search/fourheads?id=附近好房'
		},
	])
	const navListtwo = ref([{
			name: "便捷搬家",
			src: "/static/index/fasten5.png",
			type: "1",
			url: '/pages/search/fourheads?id=附近好房'
		},
		{
			name: "一键保洁",
			src: "/static/index/fasten6.png",
			type: "1",
			url: '/pages/search/searchList?id=0'
		},
		{
			name: "一键快修",
			src: "/static/index/fasten7.png",
			type: "1",
			url: '/pages/search/searchList?id=1'
		},
		{
			name: "房源托管",
			src: "/static/index/fasten8.png",
			type: "1",
			url: '/pages/search/fourheads?id=附近好房'
		},
	])
	const swipers = reactive([{
			image: '../../../../static/lunbotu.png',
			// title: '昨夜星辰昨夜风，画楼西畔桂堂东',
		},
		{
			image: '../../../../static/lunbotu.png',
			// title: '身无彩凤双飞翼，心有灵犀一点通',
		},
		{
			image: '../../../../static/lunbotu.png',
			// title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳',
		},
	]);
</script>

<style scoped lang="scss">
	.fixed-background {
		position: relative;
		z-index: 1;
	}

	.content {
		position: relative;

		.grope {
			position: fixed;
			width: 100vw;
			z-index: 99;
			top: 0;
			background: linear-gradient(to bottom, #FEB98E, #F2DDB4);
			// background-color: #666666;
			height: 60px;
		}
	}

	.fixed-background::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(to bottom, #FEB98E, #F9E9BE, #F6F6F6);
		z-index: -1;
		height: 180px;
	}



	.carousel {
		padding: 0 4vw;
		height: 100px;
		padding-bottom: 10px;
		margin: 65px auto 0;
		width: 90vw
	}

	.fasten {
		width: 100vw;
		// height: 20vh;

		.rowClass {
			padding: 0 10px;

			.tabName {
				// height: 28px;
				// line-height: 29px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-wrap: wrap;
			}
		}

		.carousel {
			padding: 0 4vw;
			height: 100px;
			padding-bottom: 15px;
		}
	}

	.distribution {
		padding: 0 4vw;

		.option {
			padding: 8px 15px;
			color: #666666;
		}

		.ones {
			background-color: #F5E8E2;
		}

		.twos {
			background-color: #E6F0F1;
		}

		.threes {
			background-color: #E7EEF6;
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin-top: 3px;
		background-color: #ffffff;
		// padding: 3px;
		position: relative;
		margin: 10px 5px 0;

		.label {
			background: rgba(0, 0, 0, 0.5);
			color: #ffffff;
			padding: 3px 6px;
			border-radius: 6px 0 10px 0;
			font-size: 14px;
		}

		.item-title {
			padding: 5px 8px 0;
			color: #333333;
			font-size: 16px;
			font-weight: 500;
		}

		.ticket {
			color: #999999;
			background: #F1F1F1;
			padding: 2px;
			margin: 6px 1px;
			font-size: 10px;
		}

		.item-price {
			padding: 3px 6px;
			color: #FF8E5A;
			font-size: 18px;
		}

		.item-desc {
			padding: 0 5px 5px;
		}
	}
</style>